<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
    1.表单容器 form
    -->
    <form>
        <div>
            <label>文本框</label>
            <input type="text" placeholder="用户名" value="aa">
            <!-- value值 用户看不见，用于传于后端收集数据标识-->
        </div>
        <div>
            <label>密码框</label>
            <input type="password">
        </div>
        <div>
             <!-- 
             label
              1 显示文本
              2 扩大响应区域
              3 两种使用方法：   
                 1. label for  =  其他表单 id 
                 2. 把表单标签 放在 label 中也行 
             -->
            <label>单选框</label>
            <input name="ger" type="radio" value="1" id="nan"> <label for="nan">男</label>
            <label>
                <input name="ger" type="radio"  value="0"> 女
            </label>
            <!--name 设置标识，在一组实现单选效果-->
        </div>
        <div>
            <label>复选框</label>
            <input type="checkbox" value="a"> 🍉
            <input type="checkbox"  value="b"> 🍌
        </div>
        <div>
            <label>文本域</label>
            <textarea placeholder="请输入评价"></textarea>
          </div>
          <div>
            <!-- 
            button 默认值就是 submit 提交
            type = button  普通按钮
            提交的时候会把 name的标识 与 value的值 提交
             -->
            <button type="button">普通的按钮</button>
            <button type="submit">提交按钮</button>
            <button type="reset">重置按钮</button>
          </div>
    </form>
</body>
</html>